// 创建“外壳”组件App
import React, { Component } from 'react';

import Header from './components/Header/Header';
import List from './components/List/List';
import Footer from './components/Footer/Footer';

import './App.css'

// 创建并暴露App组件
export default class App extends Component{
    // 状态在哪里操作状态的方法就在哪里
    // 初始化状态
    state = {
        todos: [
            { id: '001', name: '吃饭', done: true },
            { id: '002', name: '睡觉', done: true },
            { id: '003', name: '打豆豆', done:false}
        ]
    }
    //addTodo用于添加一个新的todo,接受的参数是todo对象
    addTodo = (todoObj) => {
        // 获取原 todos
        let { todos } = this.state;
        // 追加一个 todo
        let newTodos = [todoObj, ...todos];
        // 更新状态
        this.setState({ todos: newTodos });
    }
    
    // updateTodo更新todo对象
    updateTodo = (id, done) => {
        // 获取原 todos
        let { todos } = this.state;
        // 匹配处理数据
        let newTodos =  todos.map((todoObj) => {
            if (todoObj.id === id) return { ...todoObj, done }
            else return todoObj;
        })
        // 更新状态
        this.setState({ todos: newTodos });
    }
    // 删除todo对象
    deleteTodo = (id) => {
        // 获取原 todos
        let { todos } = this.state;
        let newTodos = todos.filter((todoObj) => {
            return todoObj.id !== id;
        })
        this.setState({todos: newTodos})
    }

    //全选与反选
    checkAllTodo = (flag) => {
        // 获取原 todos
        let { todos } = this.state;
        let newTodos = todos.map((todoObj) => {
            return {...todoObj, done:flag}
        })
        this.setState({ todos: newTodos });
    }

    // 清除所有已完成的
    checkAllDone = () => {
        // 获取原 todos
        let { todos } = this.state;
        let newTodos = todos.filter((todoObj) => {
            return !todoObj.done
        })
        this.setState({todos:newTodos})
    }
    render() {
        const { todos } = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo} />
                    <Footer todos={todos} checkAllTodo={this.checkAllTodo} checkAllDone={ this.checkAllDone }/>
                </div>
            </div>
        )
    }
}
